<template>
  <div>
    <el-table
      ref="fileData"
      :data="tableData"
      border
      size="medium"
      style="width:100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" min-width="3" align="center"></el-table-column>
      <el-table-column label="名称" min-width="20" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.isFolder">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wenjianjia"></use>
            </svg>
            <el-button type="text" style="color: #000"
                       @click="enterFolder(scope.row)">{{scope.row.folderName}}</el-button>
          </span>
          <span v-else>
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="scope.row.fileType"></use>
            </svg>
            <span>{{scope.row.fileName}}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="大小" prop="fileSize" min-width="10" align="center">
        <template slot-scope="scope">
          <span v-if="!scope.row.isFolder">{{scope.row.fileSize | fileSizeFilter}} KB</span>
        </template>
      </el-table-column>
      <el-table-column label="点击" prop="clickNumber" min-width="5" align="center"></el-table-column>
      <el-table-column label="最后更新" prop="updateMsg" min-width="18" align="center"></el-table-column>
      <el-table-column label="操作" min-width="20" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="viewAttr(scope.row)">
            属性
          </el-button>
          <el-button type="text" size="small" @click="rename(scope.row)">
            重命名
          </el-button>
          <el-button type="text" size="small" v-if="userId === scope.row.userId" @click="deleteFile(scope.row)">
          删除
          </el-button>
          <el-button type="text" v-if="!scope.row.isFolder" size="small" @click="view(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--<el-pagination-->
    <!--style="margin-top: 1%"-->
    <!--@size-change="handleSizeChange"-->
    <!--@current-change="handleCurrentChange"-->
    <!--:current-page="currentPage"-->
    <!--:page-sizes="pageSizes"-->
    <!--:page-size="pageSize"-->
    <!--layout="total, sizes, prev, pager, next, jumper"-->
    <!--:total="totalCount">-->
    <!--</el-pagination>-->
    <attr-dialog :form-value="attr" :title="dialogTitle"></attr-dialog>
  </div>
</template>

<script>
  import {fileService} from '../../../service/fileService'
  import AttrDialog from './dialog/AttrDialog'
  import {folderService} from '../../../service/folderService'
  import {Msg} from '../../../tools/message'

  export default {
    name: 'dmTable',
    components: {AttrDialog},
    data () {
      return {
        currentPage: 1,
        pageSizes: [10, 20, 30, 40],
        pageSize: 10,
        totalCount: 0,
        attr: {},
        dialogTitle: '文件属性',
        userId: this.$store.getters.userInfo.userId
      }
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    methods: {
      viewAttr (row) {
        this.$store.commit('setAttrDialogVisible')

        if (row.isFolder) {
          this.dialogTitle = '文件夹属性'
          this.findFolderAttribute(row)
        } else {
          this.dialogTitle = '文件属性'
          this.findFileAttribute(row)
        }

      },
      findFileAttribute (row) {
        fileService.findFileAttribute({fileId: row.fileId}).then(res => {
          // console.log(res)
          this.attr = res.data.data
          this.getFileAttr(row)
        }).catch(error => {
          console.log(error)
        })
      },
      findFolderAttribute (row) {
        folderService.findFolderAttribute({folderId: row.folderId}).then(res => {
          this.attr = res.data.data
          this.getFolderAttr(row)
        }).catch(error => {
          console.log(error)
        })
      },
      getFileAttr(row) {
        this.attr.fileName = row.fileName
        this.attr.fileType = row.fileType
        this.attr.isFolder = row.isFolder

      },
      getFolderAttr(row) {
        this.attr.folderName = row.folderName
        this.attr.isFolder = row.isFolder
      },
      rename (row) {
        this.$emit('rename', row)
      },
      view (row) {
        console.log('查看')

        if (row.suffix === 'doc' || row.suffix === 'ppt' || row.suffix === 'docx' || row.suffix === 'xls') {
          // office文件预览
          let href = 'http://view.officeapps.live.com/op/view.aspx?src=' + process.env.BASE_FILE_URL + row.relativePath
          this.display(row, href)
        } else if (row.suffix === 'pdf') {
          // pdf在线预览  + process.env.BASE_FILE_URL + row.relativePath
          window.open('/static/pdf.html')
        } else {
          // 图片预览
          let href = process.env.BASE_FILE_URL + row.relativePath
          this.display(row, href)
        }
        // 更新点击次数
        this.updateClickNum(row)
      },
      // 文件预览
      display (row, href) {
        let a = document.createElement('a')
        let e = document.createEvent('MouseEvents')
        // 创建鼠标事件对象初始化事件对象
        e.initEvent('click', false, false)
        // 设置下载地址
        a.href = href
        a.target = '_blank'
        // 给指定的元素，执行事件click事件
        a.dispatchEvent(e)
      },

      // 更新点击次数
      updateClickNum (row) {
        console.log(row)
        row.clickNumber += 1
        fileService.updateClickNum({fileId: row.fileId}).then(res => {
          console.log(res)
        }).catch(error => {
          console.log(error)
        })
      },
      handleSelectionChange (val) {
        this.$emit('handleSelectionChange', val)
      },
      handleSizeChange (val) {
        this.pageSize = val
      },
      handleCurrentChange (val) {
        this.currentPage = val
      },
      enterFolder (folderId) {
        this.$emit('enterFolder', folderId)
      },
      deleteFile (row) {
        this.$emit('deleteFile', row)
      },
      clearSelection () {
        this.$refs.fileData.clearSelection()
      }
    },
    filters: {
      fileSizeFilter (value) {
        let realVal = Number(value / 1024).toFixed(2)
        return Number(realVal)
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
